<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>scroller</title>
  <link rel="stylesheet" href="./style.css" type="text/css" />
  <body>
    <div class="scroller">
      <ins></ins>
      <div style="height: 100px">
        <p>我是图片1，是不是很熟悉，专属配图：</p>
        <p>
          <img
            loading="lazy"
            src="https://image.zhangxinxu.com/image/study/s/hanyun.jpg"
          />
        </p>
        <p>最近上架新书作品封面图：</p>
        <p>
          <img
            loading="lazy"
            src="https://image.zhangxinxu.com/image/blog/202407/2024-7-23_144238.jpeg"
          />
        </p>
        <div style="height: 100px"></div>
      </div>
    </div>
    <div class="container" style="width: 360px">
      <section>
        <p>
          《HTML并不简单》是目前市面上唯一一本围绕HTML展开介绍Web前端开发的书籍，去粗取精，有的放矢。2024年7月出版，作者张鑫旭，382页，定价109元。
        </p>
        <label><input type="checkbox" hidden /></label>
      </section>
      <section>
        <p>
          《HTML并不简单》是目前市面上唯一一本围绕HTML展开介绍Web前端开发的书籍，去粗取精，有的放矢。2024年7月出版，作者张鑫旭，382页，定价109元。
        </p>
        <p>
          这本书的特点是独家，稀缺，作为业界少有的花大量时间研究与实践HTML的人，里面所呈现的知识是其他地方很难看到的
        </p>
        <label><input type="checkbox" hidden /></label>
      </section>
    </div>
    <button class="btn" onclick="this.classList.toggle('loading')">
      点击我
    </button>
    <div class="spin"></div>
    <!-- <script src='./script.js' type='text/javascript'></script> -->
  </body>
</html>
